<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ name }}
    {{ app }}
    <div>
      <button @click='data_update()'>点击更新数据arr</button>
      <button @click='destroyData()'>点击销毁实例</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: '老王',
      app: '123123123'
    },
    methods: {
      data_update() {
        this.app = 123
        console.log(this.app);
      },
      destroyData() {
        // 销毁实例
        this.$destroy()
      }
    },
    beforeCreate() {
      console.log('创建前👇👇👇👇👇👇👇')
      console.log(this.$el)  // undefined
      console.log(this.name) // undefined
    },
    created() {
      console.log('创建完成👇👇👇👇👇👇👇')
      console.log(this.$el)  // undefined
      console.log(this.name)  // ‘老王’
    },
    beforeMount() {
      console.log('挂载前👇👇👇👇👇👇👇')
      console.log(this.$el)  // <div id='app'>{{name}}</div>
      console.log(this.name)  // ‘老王’
    },
    mounted() {
      console.log('挂载完成👇👇👇👇👇👇👇')
      console.log(this.$el)  // <div id='app'>老王</div>
      console.log(this.name)  // ‘老王’
    },
    beforeUpdate() {
      console.log('更新前👇👇👇👇👇👇👇')
      console.log(this.$el)
      console.log(this.app)
    },
    updated(){
      console.log('更新完成👇👇👇👇👇👇👇')
      console.log(this.$el)
      console.log(this.app)
    },
    beforeDestroy(){
      console.log('销毁前👇👇👇👇👇👇👇')
      console.log(this.$el)
      console.log(this.app)  
    },
    destroyed() {
      console.log('销毁完成👇👇👇👇👇👇👇')
      console.log(this.$el)
      console.log(this.app)  
    }
  })
</script>
</body>

</html>